import { Outlet,Link,useLocation } from "react-router-dom";
import { Layout,Menu ,Button} from "antd";
const { Header, Content, Footer,Sider } = Layout;
import { routerlist } from "../router/index";
import { useTranslation } from 'react-i18next';
import Theme from "../computed/Theme";
export const god=(routes)=>{
    const { t, i18n } = useTranslation();
    return routes.map(route=>{
        const meneItem={
            label:t(route.meta.title),
            key:route.path
        }
        if(route.children){
            return {
                ...meneItem,
                children:god(route.children)
            }
        }
        return {
            ...meneItem,
            label:<Link to={route.path}>{t(route.meta.title)}</Link>
        }
    })
}

export default function Layouts() { 
    const { t, i18n } = useTranslation();
    const Location=useLocation()
    const ass=()=>{
        i18n.changeLanguage(i18n.language==='en'?'zh':'en')
        localStorage.setItem('language',i18n.language)
    }
    return (
        <Layout>
            
            <Header style={{width:'100%',backgroundColor:'#fff',display:'flex',alignItems:'center'}}>
                <Button onClick={ass}>{i18n.language==='en'?'中文':'英文'}</Button>
                
                <Menu  theme="light" mode='horizontal' selectedKeys={[Location.pathname]} items={god(routerlist)} />
                <div style={{display:'flex',float:'right',marginLeft:'700px'}}><Theme /></div>
            </Header>
            <Content style={{height:'100vh',background:'var(--background-color)',color:'var(--text-color)'}}>
                <Outlet />
            </Content>
        </Layout>
    )
}